.aside {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 24px;

  min-width: 220px;
  padding-top: 72px;
  padding-right: 20px;

  border-right: 1px solid var(--color-dark-300);

  & > a {
    display: flex;
    gap: 12px;
  }

  & > a:hover .navLink {
    color: var(--color-primary-100);
  }

  & > a:hover .navIcon path {
    fill: var(--color-primary-100) !important;
  }

  & > button:hover .navIcon path {
    fill: var(--color-primary-100) !important;
  }

  & > button:hover .navLink {
    color: var(--color-primary-100);
  }

  & > a:nth-child(6) {
    margin-top: 60px;
  }

  & > *:last-child {
    margin-top: 180px;
  }

  & > .spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.activeLink .navLink {
  color: var(--color-primary-500);
}

.activeLink .navIcon path {
  fill: var(--color-primary-500) !important;
}

.btnCreate {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;

  padding: 0;

  background-color: transparent;
  border: none;

  &:hover {
    background-color: transparent;
    border: none;
  }

  &:active {
    border: none;
  }

  &:focus {
    background-color: transparent;
  }
}
